<!--
 * @Description:
 * @Author: xuzp4
-->
<template>
  <el-dialog
    class="toast-dialog"
    :visible="_visible"
    :close-on-click-modal="false"
    :title="type === 'add' ? $t('diantiguanli.xinzengdianti') : $t('diantiguanli.bianjidianti')"
    :append-to-body="true"
    width="700px"
    :before-close="handleClose"
  >
    <div class="content pl-50 d-flex jc-around ai-center" style="margin-bottom: 50px">
      <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
        <el-form-item
          :label="$t('diantiguanli.diantimingcheng')"
          prop="elevatorName"
        >
          <el-input v-model="formData.elevatorName" />
        </el-form-item>
        <el-form-item
          :label="$t('diantiguanli.diantikaiguan')"
          prop="signalState"
        >
          <el-select v-model="formData.signalState" class="mr-20">
            <el-option :label="$t('elevator_state_off')" :value="false" :key="false"></el-option>
            <el-option :label="$t('elevator_state_on')" :value="true" :key="true"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <MyButton class="cancel" @click="cancel">
        {{
        $t("common.cancel")
        }}
      </MyButton>
      <MyButton class="confirm" @click="confirm">
        {{
        $t("common.confirm")
        }}
      </MyButton>
    </div>
  </el-dialog>
</template>

<script>
import { addElevator, editElevator } from "./service";
import util from "@/utils";
import MyButton from "@/components/Button";
import UploadImg from "@/components/UploadImg";
export default {
  components: { MyButton, UploadImg },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: () => {
        return {};
      }
    },
    imageUrl: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: "add"
    }
  },
  watch: {
    row: {
      handler(val) {
        if (val) {
          this.$set(this, "formData", {
            ...val
          });
        }
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    _visible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  data() {
    return {
      parentImageUrl: "",
      lib_switch_list: [
        { label: "开", value: 1 },
        { label: "关", value: 0 }
      ],
      formData: {},
      rules: {
        mapName: [
          {
            required: true,
            message: this.$t("dituguanli.map_name_required"),
            trigger: "change"
          }
        ],
        mapLength: [
          {
            required: true,
            message: this.$t("dituguanli.map_length_required"),
            trigger: "change"
          }
        ],
        mapWidth: [
          {
            required: true,
            message: this.$t("dituguanli.map_width_required"),
            trigger: "change"
          }
        ]
      }
    };
  },
  methods: {
    confirm() {
      if (this.type === "add") {
        this.$refs.form.validate(valid => {
          if (valid) {
            const params = {
              ...this.formData
            };
            addElevator(params).then(() => {
              util.msg.success("add_success");
              this.$emit("refresh");
              this.cancel();
            });
          }
        });
      } else {
        this.$refs.form.validate(valid => {
          if (valid) {
            const params = {
              ...this.formData
            };
            editElevator(params).then(() => {
              util.msg.success("edit_success");
              this.$emit("refresh");
              this.cancel();
            });
          }
        });
      }
    },
    cancel() {
      this.$refs.form.resetFields();
      this._visible = false;
    },
    handleClose(done) {
      this.$refs.form.resetFields();
      this._visible = false;
      done();
    },
    handleUpload(fileData) {
      // 此处的 fileData 是从子组件 emit 过来的数据对象
      // console.log(fileData);
      // console.log(fileData.url);
      // console.log(fileData.base64);
      this.formData.imgUrl = fileData.base64;
    }
  }
};
</script>
<style lang="less" scoped>
.toast-dialog {
  z-index: 9999;
  .content {
    width: 100%;
    /deep/ .el-form {
      width: 100%;
      .el-input {
        width: 200px;
      }
    }
  }
}
::v-deep .avatar {
  width: 250px;
  height: 150px;
  display: block;
}
::v-deep .el-upload-dragger {
  width: 250px;
  height: 150px;
}
::v-deep .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 250px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
</style>
